<template>
  <div class="aside">
    <el-menu router :default-active="$route.path">
      <el-menu-item index="/myIndex"
        ><el-icon><HomeFilled /></el-icon>首页</el-menu-item
      >
      <el-sub-menu index="0">
        <template #title>
          <el-icon><Management /></el-icon>项目管理
        </template>
        <el-menu-item index="/projectList">项目列表</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="1">
        <template #title>
          <el-icon><message /></el-icon>作品管理
        </template>
        <el-menu-item index="/worksType">作品分类</el-menu-item>
        <el-menu-item index="/worksList">作品列表</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="2">
        <template #title>
          <el-icon><Reading /></el-icon>日记管理
        </template>
        <el-menu-item index="/diaryType">日记分类</el-menu-item>
        <el-menu-item index="/diaryList">日记列表</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="3">
        <template #title>
          <el-icon><Setting /></el-icon>系统管理
        </template>
        <el-menu-item index="/personalInfo">个人信息</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>


<script lang="ts" setup>
// import { ref } from "vue";
import { Message,HomeFilled,Setting,Reading,Management } from "@element-plus/icons-vue";
</script>

<style lang="scss" scoped>
.aside {
  width: 200px;
  height: calc(100vh - 60px);
  background-color: #eee;
}
</style>
